<template>
	<view>
		<view class="c-img top h-183" :style="'background-image: url(' + WEBCONFIG?.bg + ');'">
			<view :style="'padding-top:' + statusHeight+ 'px;'">
				<view class="fs-20 fw-600 text-white py-12 px-20">
					首页
				</view>
			</view>
		</view>

		<view class=" position-relative  " :style="`top:${top}rpx`">
			<view class="px-12">
				<view class="bg-white rounded-12">
					<swiper autoplay interval="2000" circular style="height: 300rpx;" class="w-p-100">
						<swiper-item class="rounded-12 h-p-100 w-p-100" v-for="(item,index) in props.adsList"
							:key='index'>
							<image class="h-p-100 w-p-100" :src='item.image_url'></image>
						</swiper-item>
					    <!-- #ifdef MP-WEIXIN -->
					    <swiper-item class="rounded-12"
					    	v-if="WEBCONFIG?.weixin_banner_status && WEBCONFIG?.weixin_banner_status == 1">
					    		<ad :unit-id="WEBCONFIG?.weixin_banner_ad_id" ad-theme="white"></ad>
					    </swiper-item>
					    <!-- #endif -->
					    <!-- #ifdef MP-TOUTIAO -->
					    <swiper-item class="rounded-12"
					    	v-if="WEBCONFIG?.douyin_banner_status && WEBCONFIG?.douyin_banner_status == 1">
					    		<ad :unit-id="WEBCONFIG?.douyin_banner_ad_id" ad-theme="white"></ad>
					    </swiper-item>
					    <!-- #endif -->
					</swiper>
				</view>
			</view>
			
			<view class="mt-12 px-12">
				<view class="flex">
					<view class="djs flex flex-column flex-center px-10 py-6  block rounded-12 box-sizing h-57">
						<view class="fs-13 text-grey-1 text-ellipsis-1">{{WEBCONFIG?.index_text}}</view>
						<view class="mt-2 fs-22 fw-600 text-red-1">
							{{$tool.daysUntilDate(WEBCONFIG?.index_date)}}
							<span class="text-grey-2 fs-11 ml-2">天</span>
						</view>
					</view>
					<view class="ml-10 h-57 c-img  flex-1 tz  flex flex-y-center flex-x-flex-end">
						<view class="w-p-80">
							<uv-notice-bar :text="props.notice" color="#000" bgColor="none" icon=""></uv-notice-bar>
						</view>
					</view>
				</view>
				<view class="mt-16 flex flex-x-space-between">
					<view class="nav nav-tk c-img" @click="$page.open('/pages/topic/category')">

					</view>
					<view class="nav nav-ks c-img" @click="$page.open('/pages/testPaper/list')">

					</view>
				</view>

				<view class="mt-16 rounded-12 bg-white px-12 pt-12 pb-2">
					<view class="flex flex-wrap">
						<view class="flex flex-column flex-center w-p-25 mb-10" v-for="(item,index) in navList"
							:key="index" @click="onClick(item)">
							<image :src="item.image_index1" class="w-46 h-46 rounded-circle"></image>
							<view class="fs-14 text-grey-3 mt-4">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="WEBCONFIG?.data_show=='1' ">
				<view class="flex flex-x-space-between fs-16 mt-20 box-sizing ">
					<view class="flex flex-y-center">
						<view class="w-4 h-15 bg-blue-1 rounded-right-4"></view>
						<text class="ml-4">刷题进度</text>
					</view>
					<view class="flex flex-y-center mr-12" @click="$page.open('/pages/topic/category')">
						<text class="text-blue-1 mr-4">继续刷题</text>
						<image src="@/static/icon/jxst.png" class="w-16 h-16"></image>
					</view>
				</view>
				<view class="px-12">
					<y-data ref="data" @clear="clear"></y-data>
				</view>
			</view>

			<view class="p-12 mt-12 bg-white" v-if="articleList.length>0&& WEBCONFIG?.custom_article=='1'">
				<view class="flex flex-x-space-between  ">
					<image :src="WEBCONFIG?.rmzx" class="h-19" mode="heightFix"></image>
					<view class="flex flex-y-center" @click="$page.switch('/pages/article/article')">
						<text class="fs-12 text-grey-4">查看更多</text>
						<uv-icon name="arrow-right" color="#acacac"></uv-icon>
					</view>
				</view>

				<view class="flex flex-column grid-gap-10 mt-14">
					<view class="flex " v-for="(item,index) in articleList" :key="index"
						@click="$page.open('/pages/article/detail?id='+item.id)">
						<view class="w-110 h-70">
							<image class="w-110 h-70 rounded-6" mode="aspectFit" :src="item.image"></image>
						</view>
						<view class="flex flex-column ml-15">
							<text class="fs-14 text-ellipsis-2">{{item.name}}</text>
							<text class="fs-12 text-grey-4 pt-4 text-ellipsis-2">{{item.desc}}</text>
						</view>
					</view>
				</view>
			</view>
			
			
			<!-- #ifdef MP-WEIXIN -->
				<view v-if="WEBCONFIG?.weixin_video_status && WEBCONFIG?.weixin_video_status == 1">
					<ad :unit-id="WEBCONFIG?.weixin_video_ad_id" ad-theme="white"></ad>
				</view>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
				<view class="ad" v-if="WEBCONFIG?.douyin_video_status && WEBCONFIG?.douyin_video_status == 1">
					<ad :unit-id="WEBCONFIG?.douyin_video_ad_id" ad-theme="white"></ad>
				</view>
			<!-- #endif -->
		</view>

		<view v-if="WEBCONFIG?.douyin_im_status=='1'" class="kf c-img rounded-circle position-fixed right-12 "
			:style="`bottom:${bottom}px`">
			<button class='btn-normal w-p-100 h-p-100' open-type="im" @click="openCustomer"
				:data-im-id="WEBCONFIG?.douyin_im_id" @error="imErr">

			</button>
		</view>
		<view v-else class="kf c-img rounded-circle position-fixed right-12 " :style="`bottom:${bottom}px`"
			@click="openCustomer">
		</view>
		
	</view>
</template>

<script setup>
	import { ref, defineProps, defineEmits, onBeforeMount, defineExpose } from 'vue'
	import { $page, $tool, useStorage, $http } from '@/utils'
	import { useWebConfigStore, useRefs } from "@/stores/index";
	const { WEBCONFIG } = useRefs(useWebConfigStore());
	const statusHeight = uni.getSystemInfoSync().statusBarHeight
	const articleList = ref([])
	const emit = defineEmits(['open', 'clear'])
	const props = defineProps({
		adsList: {
			default: [],
			type: Array
		},
		notice: {
			default: '',
			type: String
		},
		navList: {
			default: [],
			type: Array
		}
	})
	const info = ref()
	const all = ref(0)
	const correct = ref(0)
	// #ifdef H5
	const top = ref(-266)
	// #endif
	// #ifndef H5
	const top = ref(-166)
	// #endif
	const answer = ref(0)
	const data = ref()
	const bottom = ref(20)
	onBeforeMount(() => {
		if (WEBCONFIG.value.custom_tabbar == 1) {
			bottom.value = 60 + uni.getSystemInfoSync().safeAreaInsets.bottom
		}
		// #ifdef H5
		bottom.value = 60 + uni.getSystemInfoSync().safeAreaInsets.bottom
		// #endif
		getList()
	})

	const getList = () => {
		$http.get('Article/getList', { limit: 5 }).then(res => {
			articleList.value = res.data
		})
	}
	
	const adError= (err) =>{
	    console.error('Banner 广告加载失败', err)
	  }

	const onClick = (e) => {
		if (e.type == 1) {
			$page.switch(e.path)
			return;
		}
		$page.open(e.path + '?' + e.param || '')
	}
	const imErr = (e) => {
		console.log(1112)
		$tool.toast('打开客服失败')
	}

	const update = () => {
		data.value.getRecord()
	}
	const openCustomer = () => {
		emit('open')
	}

	const clear = () => {
		emit('clear')
	}
	defineExpose({ update })
</script>

<style scoped lang="scss">
	.h-183 {
		height: 366rpx;
	}

	.ml-60 {
		margin-left: 120rpx;
	}


	.h-57 {
		height: 114rpx;
	}

	.tz {
		background-image: url('/static/icon/tz.png');
	}

	.djs {
		background: linear-gradient(transparent, #EEF1FF 100%);
		border: 1rpx solid #EEF1FF;
	}

	.nav {
		width: 330rpx;
		height: 212rpx;
	}

	.nav-tk {
		background-image: url('/static/icon/tk.png');
	}

	.nav-ks {
		background-image: url('/static/icon/ks.png');
	}

	.kf {
		background-image: url('/static/icon/kf.png');
		width: 112rpx;
		height: 112rpx;
	}
</style>